import React, { useState } from "react";
import { Layout, Button, Tooltip } from "antd";
import { Outlet } from "react-router-dom";
import SideMenu from "../components/SideMenu";
import "./MainLayout.less";
import { Icons } from "@/utils/icons";

const { Header, Content, Sider } = Layout;

const MainLayout: React.FC = () => {
  const [collapsed, setCollapsed] = useState(true);

  return (
    <Layout className="main-layout">
      <Sider
        trigger={null}
        collapsible
        collapsed={true}
        collapsedWidth={50}
        width={50}
        theme="light"
        className="main-sidebar"
      >
        <Tooltip title="智能应用" placement="right">
          <div className="logo">
            <Icons.Logo width={36} height={36} />
          </div>
        </Tooltip>
        <SideMenu collapsed={true} />
      </Sider>
      <Layout>
        <Content className="main-content">
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default MainLayout;
